<body id="body_id">
<!--Situation stuffs-->
		<!-- color picker -->
                <script type="text/javascript" src="<?php echo base_url()?>images/js/jscolor/jscolor.js"></script>
		<script src="<?php echo base_url()?>images/js/ckeditor_3.5/ckeditor/ckeditor.js" type="text/javascript"></script>
                <script src="<?php echo base_url()?>images/js/ckeditor_3.5/ckeditor/_source/core/editor.js" type="text/javascript"></script>
		<script src="<?php echo base_url()?>images/js/ckeditor_3.5/ckeditor/_samples/sample.js" type="text/javascript"></script>
		<!-- color picker -->
		<!-- editor. -->
		<script type="text/javascript">
			//<![CDATA[
				//GLOBAL Variable Needed
                                
				var deleteElement; // this for refering to deleted element 
				var editor;// this hold the CKEDITOR element
				var elementRef;// this is just A reference for selected element to be used by any function
				function createEditor(element) {//this function create and place editor into div 'editor'
					javascript:scroll(0,0);
					deleteElement="o_"+element;
					//removeButton.disabled = false;
					//removeElement.disabled = false;
                                        $("#save_publis").hide();
                                        $("#altToolBar").show();
					/*document.getElementById("context_save_icon").style.visibility = "visible";

                                        document.getElementById("insert_link").style.visibility = "visible";
                                        document.getElementById("upload_img").style.visibility = "visible";
                                        document.getElementById("add_map").style.visibility = "visible";


					document.getElementById("context_cancel_icon").style.visibility = "visible";*/
					
					if (editor)
						return;

					var html = document.getElementById(element).innerHTML;

					// Create a new editor inside the <div id="editor">, setting its value to html
					var config = {};
					editor = CKEDITOR.appendTo('editor', config, html);
                                        editor.AutoDetectLanguage = true ;
					elementRef = element;
					//resizing();
					//draging();
					
				}
				function removeEditor_cancel() {
					
					//removeButton.disabled = true;
					//removeElement.disabled = true;
                                        $("#save_publis").show();
                                        $("#altToolBar").hide();

					/*document.getElementById("context_save_icon").style.visibility = "hidden";

                                        document.getElementById("upload_img").style.visibility = "hidden";
                                        document.getElementById("add_map").style.visibility = "hidden";
                                        document.getElementById("insert_link").style.visibility = "hidden";


					document.getElementById("context_cancel_icon").style.visibility = "hidden";*/
					if (!editor)
						return;


					

					// Destroy the editor.
					editor.destroy();
					editor = null;
					//resizing();
					//draging();
					
				}
				function removeEditor() {
					
					//removeButton.disabled = true;
					//removeElement.disabled = true;
                                        $("#save_publis").show();
                                        $("#altToolBar").hide();

					/*document.getElementById("context_save_icon").style.visibility = "hidden";

                                        document.getElementById("upload_img").style.visibility = "hidden";
                                        document.getElementById("add_map").style.visibility = "hidden";
                                        document.getElementById("insert_link").style.visibility = "hidden";

					document.getElementById("context_cancel_icon").style.visibility = "hidden";*/
					if (!editor)
						return;


					// Retrieve the editor contents. In an Ajax application, this data would be
					// sent to the server or used in any other way.
					document.getElementById(elementRef).innerHTML = editor.getData();
                                        for (var i = 0; i <List_Contexts.length; i++)
                                        {
                                            if(typeof (List_Contexts[i])  != 'undefined'||List_Contexts[i]!=null)
                                            {
                                                    if(List_Contexts[i].name==elementRef)
                                                    {
                                                        if(List_Contexts[i].flag=='new')
                                                            List_Contexts[i].flag='new';
                                                        else
                                                            List_Contexts[i].flag='updated';
                                                    }
                                            }
					}
					document.getElementById('Div1').style.display = '';

					// Destroy the editor.
					editor.destroy();
					editor = null;
					//resizing();
					//draging();
					
				}
			//]]>
		</script>
		
		<!-- draging. -->
		<script type="text/javascript">
		//<![CDATA[
				//arguments and objects
                                var height_retrieved="550px";
				var situation_class;
				var List_Contexts=new Array();
				var context_obj=new context_object_class();
				var count = 0;
				var title,tags,color;
				var html;
				
				//situation class//
				function situation_class(array_of_context,html_of_situation)
				{
					this.array_of_context=array_of_context;
					this.html_of_situation=html_of_situation;
				}
				//context class//
				function context_object_class(id,name,tags,color,html,situation_id,flag)
				{
                                        this.id=id;
					this.name=name;
					this.tags=tags;
					this.color=color;
					this.html=html;
                                        this.situation_id=situation_id;
                                        this.flag=flag
				}
				function changeDivHTML() {
					
					document.getElementById("popup_title_tags").style.visibility = "visible";
					
				}
				function EditContext(contextToBeDel)
				{
						
				}
				function DeletetContext(contextToBeDel)
				{
						$("#o_"+contextToBeDel).remove();
							for (var i = 0; i <= count; i++) {
								if(typeof (List_Contexts[i])  != 'undefined'||List_Contexts[i]!=null)
								{
									if(List_Contexts[i].name==contextToBeDel)
									{
											//document.getElementById("o_"+contextToBeDel).style.visibility = "hidden";
											if(List_Contexts[i].flag=='new')
                                                                                        {
                                                                                            List_Contexts.splice(i,1);
                                                                                            count--;
                                                                                        }
                                                                                        else
                                                                                            List_Contexts[i].flag='deleted';
											//
											
									}	
								}
						}
						removeEditor_cancel();
						
				}
				function deleteEle(deleteElement)//depracated!
				{
					removeEditor();
					var d = document.getElementById('Div1');
					var olddiv = document.getElementById(deleteElement);
					d.removeChild(olddiv);
					
					
					
				}
				
				
				function ok()
				{
                                        count;
					//document.getElementById("popup_title_tags").style.visibility = "hidden";
					title=document.getElementById("title").value;
					tags=document.getElementById("tags").value;
					color=document.getElementById("color").value;
					
					
					
					
					var curr_context = title+"_" + count;
					var o_curr_context = "o_"+title+"_" + count;
					//title=curr_context;
					var previousInnerHTML = new String();
					
					// to keep resizing working every time you create a new context
					destroyResizing();
					
					previousInnerHTML = document.getElementById('Div1').innerHTML;

					previousInnerHTML = previousInnerHTML.concat("<div  id=" + o_curr_context + " onmouseover=\"show('" + curr_context + "');\" onmouseout=\"hide('" + curr_context + "');\" style='resize:none;-moz-border-radius-bottomleft: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-left-radius: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;cursor:move;position:absolute;min-height:200px; min-width:300px; background-color:#615F5F;'><div class='hideOndb'  id=" + curr_context + " ondblclick=\"createEditor('"+curr_context+"');\"  style=\"resize:none;-webkit-box-shadow: rgba(0, 0, 0, 0.0976563) 1px 1px 5px; box-shadow: rgba(0, 0, 0, 0.0976563) 1px 1px 5px;background-color: #" + color + ";border-style:solid;border-width:1px;border-color:#f3f3f3 ;height:170px; width:292px;  left:3px; top:25px; ;position:relative;text-align:left;word-wrap: break-word;overflow:hidden\"><\/div><p id='p_"+curr_context+"' style='color:white;top:-13px;left:75px;position:absolute'>" + title + "</p><img title='Delete' class='hideImg' src='<?php echo base_url()?>images/download.png' onmouseover=\"imgHover('imgid_del_"+curr_context+"','closeHover.png')\" onmouseout=\"imgHover('imgid_del_"+curr_context+"','download.png')\" id='imgid_del_"+curr_context+"' style='height:18px;cursor:auto;margin-right:4px;margin-left:auto;position: absolute; top:2px;right:2px;margin-top:1px; margin-bottom:0px;'  onclick=\"DeletetContext('" + curr_context + "');\"  /><img title='Move' class='copyClass' onmouseover=\"imgHover('imgid_copy_"+curr_context+"','copyHover.png')\" onmouseout=\"imgHover('imgid_copy_"+curr_context+"','copyImg.png')\" id='imgid_copy_"+curr_context+"' onclick=\"copy('" + curr_context + "');\" src='<?php echo base_url()?>images/copyImg.png'  style='display:none;height:18px;cursor:auto;margin-right:auto;margin-left:auto;position: absolute; top:2px;left:25px;margin-top:1px; margin-bottom:0px;'/><img title='Edit context preferences' class='mod' onmouseover=\"imgHover('imgid_mod_"+curr_context+"','modHover.png')\" onmouseout=\"imgHover('imgid_mod_"+curr_context+"','mod.png')\" id='imgid_mod_"+curr_context+"' onclick=\"edit_context('" + curr_context + "');\" src='<?php echo base_url()?>images/mod.png'  style='height:18px;cursor:auto;margin-right:auto;margin-left:2px;position: absolute; top:2px;left:2px;margin-top:1px; margin-bottom:0px;'/><img tite='Cut' class='hideImg' onmouseover=\"imgHover('imgid_cut_"+curr_context+"','cutHover.png')\" onmouseout=\"imgHover('imgid_cut_"+curr_context+"','cut.png')\" id='imgid_cut_"+curr_context+"' onclick=\"cut('" + curr_context + "');\" src='<?php echo base_url()?>images/cut.png'  style='visibilty:hidden;display:none;height:18px;cursor:auto;margin-right:auto;margin-left:auto;position: absolute; top:2px;left:45px;margin-top:1px; margin-bottom:0px;' /></div>");
					document.getElementById('Div1').innerHTML = previousInnerHTML;
					title=curr_context;
					// storing context to array //
					html_of_curr_context=document.getElementById(o_curr_context).outerHTML;
                                        
					var created_context=new context_object_class('',title,tags,color,html_of_curr_context,'','new');
					List_Contexts[count]=created_context;

					/////////////////////////////
					// to keep resizing working every time you create a new context
					//destroyResizing();
					
					resizing();
					draging();//1
					count++;
				}
                                function imgHover(id,Isrc)
                                {
                                    if(document.getElementById(id)!=null)
                                        document.getElementById(id).src = '<?php echo base_url()?>images/'+Isrc;
                                }
				function cancel()
				{
					document.getElementById("popup_title_tags").style.visibility = "hidden";
				}
				
				
				
				function show(id) {
					document.getElementById("o_"+id).style.visibility = 'visible';
				}

				function hide(id) {
					document.getElementById("o_"+id).style.visibility = 'hidden';
					document.getElementById(id).style.visibility = 'visible';
				}
				
				function destroyResizing()
				{
					for (var i = 0; i <= count; i++) {				
							if(typeof (List_Contexts[i])  != "undefined")
								$("#o_"+List_Contexts[i].name).resizable( "destroy" );
					}
				}
					
				function draging() {
					for (var i = 0; i <= count; i++) {	
							if(typeof (List_Contexts[i])  != "undefined")
								$("#o_"+List_Contexts[i].name).draggable({ containment: 'parent' });

					}
				}
				function destroyDraging() {//2
					for (var i = 0; i <= count; i++) {	
							if(typeof (List_Contexts[i])  != "undefined")
								$("#o_"+List_Contexts[i].name).draggable("destroy");
					}
				}
				function resizing() {
					for (var i = 0; i <= count; i++) {
						if(typeof (List_Contexts[i])  != "undefined")
							$("#o_"+List_Contexts[i].name).resizable({ containment: 'parent', alsoResize: "#"+List_Contexts[i].name,handles: 'all',minHeight:200,minWidth:300  });
							
					}
				}
				//get xmlhttp
				function getXMLHttp()
				{
				  var xmlHttp

				  try
				  {
					//Firefox, Opera 8.0+, Safari
					xmlHttp = new XMLHttpRequest();
				  }
				  catch(e)
				  {
					//Internet Explorer
					try
					{
					  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
					}
					catch(e)
					{
					  try
					  {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					  }
					  catch(e)
					  {
						alert("Your browser does not support AJAX!")
						return false;
					  }
					}
				  }
				  return xmlHttp;
				}
				var all_contexts_html_str='';
				//save and send request to store in DB
				function save_send()
				{
                                    destroyResizing();
                                        for(var i=0;i<List_Contexts.length;i++)
                                        {
                                            if(List_Contexts[i]!='undefined')
                                                if(List_Contexts[i].flag!='deleted')
                                                    List_Contexts[i].html=document.getElementById("o_"+List_Contexts[i].name).outerHTML;

                                        }
                                        

                                        var json_contexts=obj_to_string();
                                        
					//disable_edit();
					//sending to php
					var xmlHttp = getXMLHttp();				  
					xmlHttp.onreadystatechange = function()
					{
					if(xmlHttp.readyState == 4)
						{
						  HandleResponse(xmlHttp.responseText);
						}
					}
					//$param=document.getElementById('Div1');
					var url='<?php echo base_url()?>home/saveSituation/';
                                        
					destroyResizing();
                                        //resizing();
					destroyDraging();//1
                                        //document.getElementById('Div1').innerHTML=all_contexts_html_str;
                                        $("#waiting_div").show();
					$.post(url, {new_copy_name:new_copy_name,contexts_html_string:all_contexts_html_str, situation_id:sit_id ,html: json_contexts,count_context:count,situation_name:sit_name,situation_privavy:sit_privacy, situation_desc:sit_description,height:height_retrieved,background:background_image }
                                        ,function(data1) {
                                            

                                            $("#waiting_div").hide();
                                            //document.getElementById('Div1').innerHTML=data1;
                                            if(!document.getElementById('suggestion').checked)
                                                location.reload(true);
                                        });
                                    }
                                
                                function obj_to_string()
                                {
                                    var context_string='{"contexts":[';
                                    for(var i=0;i<List_Contexts.length;i++)
                                    {
                                        if(i>0)
                                        {
                                            context_string+=",";
                                            
                                            //all_contexts_html_str+="###";
                                        }
                                        context_string+= '{"name":"'+List_Contexts[i].name+'",';
                                        context_string+= '"tags":"'+List_Contexts[i].tags+'",';
                                        context_string+= '"color":"'+List_Contexts[i].color+'",';
                                        context_string+= '"flag":"'+List_Contexts[i].flag+'",';
                                        if(sit_id=='undefined')
                                        {
                                            context_string+= '"situation_Id":"",';
                                            context_string+= '"id":"",';
                                            context_string+= '"html":""}';
                                            
                                        }
                                        else
                                        {
                                            context_string+= '"situation_Id":"'+List_Contexts[i].situation_id+'",';
                                            context_string+= '"id":"'+List_Contexts[i].id+'",';
                                            context_string+= '"html":""}';
                                            
                                        }
                                        all_contexts_html_str+=List_Contexts[i].html+"###";
                                    }
                                    height_retrieved=document.getElementById("Div1").style.height;
                                    return context_string+']}';
                                }

                                function copy(element)
				{
                                    cutted_element=element;
                                    getAllSit_ddlist_copy();
                                    //var context_id_cuting='';
                                    $( "#copyContext" ).dialog( "open" );
				
				}
                                function getAllSit_ddlist_copy()
                                {
                                    var userEmail=username;
                                     var url='<?php echo base_url()?>home/getAll';
                                     $("#waiting_div").show();
                                    $.post(url, {userEmail:userEmail},function(data)
                                    {
                                         
                                         $("#waiting_div").hide();
                                         var returnedObje=data ;
                                         var situation_array_ddl=returnedObje.split(",");
                                         var sit_list_ddl='';
                                         for(var i=0;i<situation_array_ddl.length;i++)
                                            {
                                                    $situation_id_ddl=situation_array_ddl[i].split('#');
                                                    if(selectedSitId!=$situation_id_ddl[1])
                                                        sit_list_ddl+='<option id='+$situation_id_ddl[1]+' value="'+$situation_id_ddl[1]+'">'+$situation_id_ddl[0]+'</option>';
                                            }
                                            //sit_list_ddl+='</ul>';
                                            document.getElementById('sit_Id_copy').innerHTML=sit_list_ddl;
                                            document.getElementById('sit_Id_add').innerHTML=sit_list_ddl;
                                     });
                                }
				//duplicate and send request to store in DB


                                function getAllSit_ddlist()
                                {
                                    var userEmail=username;
                                     var url='<?php echo base_url()?>home/getAll';
                                     $("#waiting_div").show();
                                    $.post(url, {userEmail:userEmail},function(data)
                                    {
                                         $("#waiting_div").hide();
                                         var returnedObje=data ;
                                         var situation_array_ddl=returnedObje.split(",");
                                         var sit_list_ddl='';
                                         for(var i=0;i<situation_array_ddl.length;i++)
                                            {
                                                    $situation_id_ddl=situation_array_ddl[i].split('#');
                                                    if(selectedSitId!=$situation_id_ddl[1])
                                                        sit_list_ddl+='<option id='+$situation_id_ddl[1]+' value="'+$situation_id_ddl[1]+'">'+$situation_id_ddl[0]+'</option>';
                                            }
                                            //sit_list_ddl+='</ul>';
                                            document.getElementById('sit_Id').innerHTML=sit_list_ddl;
                                     });
                                }
                                function delete_situation()
                                {
                                    document.getElementById("gear_options").style.visibility='hidden';
                                    var userEmail=username;
                                    var url='<?php echo base_url()?>home/deleteSituation';
                                    $("#confirmOverlay").hide();
                                    $("#waiting_div").show();
                                    $.post(url, {situation_id_to_be_deleted:selectedSitId},function(data)
                                    {
                                        $("#waiting_div").hide();
                                        selectedSitId='undefined';
                                        setCookie('Situation','undefined',31);
                                        location.reload(true);
                                    });
                                    
                                }
				//cut and send request to store in DB
                                var cutted_element;
				function cut(element)
				{
                                    cutted_element=element;
                                    getAllSit_ddlist();
                                    $( "#cutContext" ).dialog( "open" );
                                        
				}
				//testing
				function get() {
					if (document.getElementById("context_10") == null)
						document.writeln("not found");
				}
		//]]>
		</script>
		<!-- dialog-->
		<script type="text/javascript">
			$(function() {
				// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
				$( "#dialog:ui-dialog" ).dialog( "destroy" );
				var title1 = $( "#title" ),
					tags1 = $( "#tags" ),
					color1 = $( "#color" ),
					allFields = $( [] ).add( title1 ).add( tags1 ).add( color1 ),
					tips = $( ".validateTips" );

				function updateTips( t ) {
					tips
						.text( t )
						.addClass( "ui-state-highlight" );
					setTimeout(function() {
						tips.removeClass( "ui-state-highlight", 1500 );
					}, 500 );
				}

				function checkLength( o, n, min, max ) {
					if ( o.val().length > max || o.val().length < min ) {
						o.addClass( "ui-state-error" );
						updateTips( "Length of " + n + " must be between " +
							min + " and " + max + "." );
						return false;
					} else {
						return true;
					}
				}

				function checkRegexp( o, regexp, n ) {
					if ( !( regexp.test( o.val() ) ) ) {
						o.addClass( "ui-state-error" );
						updateTips( n );
						return false;
					} else {
						return true;
					}
				}
				
				$( "#dialog-form" ).dialog({
					autoOpen: false,
					height: 350,
					width: 400,
					dialogClass: 'dialog_class',
					modal: true,
					buttons: {
						"Create Context": function() {
							document.getElementById('validation_c').innerHTML="";
							var bValid = true;
							allFields.removeClass( "ui-state-error" );

							bValid = bValid && checkLength( title1, "Title", 3, 16 );
							bValid = bValid && checkRegexp( title1, /^[a-z]([0-9a-z_])+$/i, "Title may consist of a-z, 0-9, underscores, begin with a letter." );
							bValid = bValid && checkLength( color1, "Color", 6, 6 );
							// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/

							if ( bValid ) {
								//if click create context
								title=document.getElementById("title").value;
								tags=document.getElementById("tags").value;
								color=document.getElementById("color").value;
								ok();
								$( this ).dialog( "close" );
								document.getElementById('validation_c').innerHTML="";
								
							}
						},
						Cancel: function() {
							document.getElementById('validation_c').innerHTML="";
							$( this ).dialog( "close" );
							document.getElementById('validation_c').innerHTML="";
						}
					},
					close: function() {
						document.getElementById('validation_c').innerHTML="";
						allFields.val( "" ).removeClass( "ui-state-error" );
						document.getElementById('validation_c').innerHTML="";
					}
				});
				$( "#create-context" )
					.click(function() {
						document.getElementById('validation_c').innerHTML="";
						$( "#dialog-form" ).dialog( "open" );
				});
				
			});	
			</script>
		<style type="text/css">
		/*<![CDATA[*/
			
			   #function_box
		{
			 -moz-border-radius: 7px;
			-webkit-border-radius: 7px;
			z-index: 1; left: 14px; 
		top: 16px; 
		position: absolute; height: 239px; width: 143px;
			text-align: center;
		}
				#Select1
				{
					z-index: 1;
					left: 194px;
					top: 16px;
					position: absolute;
					width: 208px;
				}
				#Radio1
				{
					z-index: 1;
					left: 101px;
					top: 148px;
					position: absolute;
					right: 525px;
				}
				#Radio2
				{
					z-index: 1;
					left: 177px;
					top: 148px;
					position: absolute;
					}
				#Button1
				{
					z-index: 1;
					left: 391px;
					top: 33px;
					position: absolute;
				}
				#Button2
				{
					z-index: 1;
					top: 228px;
					position: absolute;
					right: 445px;
					left: 156px;
				}
				.style1
				{
					text-align: center;
				}
				.style2
				{
					text-align: center;
					font-weight: bold;
				}
				#Text2
				{
					top: 6px;
					left: 592px;
				}
				.selected
		{
			width: 105px;
			font-weight: bold;
			background-color:white;
		}
				.style4
				{
					text-align: center;
				}
				.style5
				{
					text-align: center;
					font-weight: bold;
					height: 46px;
				}
				.style6
				{
					color: #666666;
				}
				#editor1
				{
					width: 636px;
				}
				.divStyle {
					z-index:1;
					position:absolute;
					font-family:Tahoma;
					font-size:15px;
					padding:20;
					width:250px;
					height:180px;
					margin-top:20px;
					background-color:white;
					border-color:gray;
					visibility:hidden;
					display:block;
					-moz-border-radius: 5px;
					border-radius: 5px;
					-moz-box-shadow: 0 0 5px 5px #888;
					-webkit-box-shadow: 0 0 5px 5px#888;
					box-shadow: 0 0 5px 5px #888;
				}
		/*]]>*/
		</style>
		
		
<!--moath work-->
<script type="text/javascript">

$(document).ready(function() {
	$('#file_upload').uploadify({
          'buttonText' : 'Upload File',
	  'uploader'  : '<?php echo base_url()?>uploadify/uploadify.swf',
	  'script'    : '<?php echo base_url()?>uploadify/uploadify.php',
	  'cancelImg' : '<?php echo base_url()?>uploadify/cancel.png',
	  'folder'    : 'uploads',
	  'auto'      : true,
	  'script'	  : '<?php echo base_url()?>mediaobject/upload',
	  'onComplete': uploadComplete,
	  'sizeLimit'   : 10485760,
	  'onError'     : function (event,ID,fileObj,errorObj) {
      		alert(errorObj.type + ' Error: ' + errorObj.info+". Try Again Later");
    		}
	});
        //images
        $('#image_upload').uploadify({
          'buttonText' : 'Upload Image',
	  'uploader'  : '<?php echo base_url()?>uploadify/uploadify.swf',

	  'cancelImg' : '<?php echo base_url()?>uploadify/cancel.png',
	  'folder'    : 'media_uploads',
	  'auto'      : true,
	  'script'	  : '<?php echo base_url()?>mediaobject/upload_media',
	  'onComplete': imageUploadComplete,
	  'sizeLimit'   : 10485760,
          'fileExt'     : '*.jpg;*.gif;*.png',
          'fileDesc'    : 'Image Files',
	  'onError'     : function (event,ID,fileObj,errorObj) {
      		alert(errorObj.type + ' Error: ' + errorObj.info+". Try Again Later");
    		}
	});
        //videos
        $('#video_upload').uploadify({
          'buttonText' : 'Upload Video',
	  'uploader'  : '<?php echo base_url()?>uploadify/uploadify.swf',

	  'cancelImg' : '<?php echo base_url()?>uploadify/cancel.png',
	  'folder'    : 'media_uploads',
	  'auto'      : true,
	  'script'	  : '<?php echo base_url()?>mediaobject/upload_media',
	  'onComplete': videoUploadComplete,
	  'sizeLimit'   : 10485760,
          'fileExt'     : '*.mpeg;*.mp4;*.wma;*.avi;*.flv;*.ogg;*.webm',
          'fileDesc'    : 'Video Files',
	  'onError'     : function (event,ID,fileObj,errorObj) {
      		alert(errorObj.type + ' Error: ' + errorObj.info+". Try Again Later");
    		}
	});

});

function uploadComplete(event, ID, fileObj, response, data) {
      
      var templink='<br /><a href="javascript:download('+response+')"> '+fileObj.name+' </a>';
      $( "#upload_dialog" ).dialog( "close" );
      removeEditor();
      document.getElementById(elementRef).innerHTML +=templink;
      enable_edit();
      createEditor(elementRef);
      
}
function imageUploadComplete(event, ID, fileObj, response, data) {

      var templink='<br /><img src="<?php echo base_url()?>'+'media_uploads/'+response+'" alt='+fileObj.name+'> </img>';
      $( "#upload_dialog" ).dialog( "close" );
      removeEditor();
      document.getElementById(elementRef).innerHTML +=templink;
      enable_edit();
      createEditor(elementRef);

}
function videoUploadComplete(event, ID, fileObj, response, data) {
        
      var templink='<br /><video src="<?php echo base_url()?>'+'media_uploads/'+response+'" controls> </video>';
      $( "#upload_dialog" ).dialog( "close" );
      removeEditor();
      document.getElementById(elementRef).innerHTML +=templink;
      enable_edit();
      createEditor(elementRef);

}
function download(id){
	document.getElementById("iframy").src='<?php echo base_url()?>mediaobject/download/'+id;
}
</script>
	<iframe id="iframy" style="display:none"></iframe>
		
	<!---toolbar code-->
	<div id="toolbar" style="min-height:0px;width:1250px;margin-bottom:10px">
		<div id="dialog-form" title="Create new Context">
			<p id="validation_c"class="validateTips"></p>

			<form>
			<fieldset style="border-style:hidden; padding-left:30px;color:white">
				<label for="title">Title</label>
				<input style="display:block" type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" /><br/>
				<label for="tags">Tags</label>
				<input style="display:block" type="text" name="tags" id="tags" value="" class="text ui-widget-content ui-corner-all" /><br/>
				<label for="color">Color</label>
				<input style="display:block" type="text" name="color" id="color" value="#ffffff" class="color" />
			</fieldset>
			</form>
		</div>
		<div id="toolBarButtons">
                <div id="save_publis" style=" padding-left: 420px">
                 <button id="create-context" class="cupid-blue" style="float: left;margin: 0 0 0 0 ;font-size:16px;font-family:tahoma;border-top-right-radius: 0px;border-bottom-right-radius: 0px;height:35px;"><img style=" position:relative; margin-left:-110px; margin-top: 2px ;height:16px; width: 15px " src="<?php echo base_url()?>images/new.png" /><span style="position: absolute;margin:2px 0 0 12px">New Context</span></button>
                 <button id="context_cancel_icon" class="cupid-blue" style="padding-left: 55px;width: 100px;margin: 0 0 0 -1px ; -moz-border-radius: 0px;-webkit-border-radius: 0px;font-size:16px;font-family:tahoma;height:35px;" onclick="disable_edit()"><img style=" position:relative; margin-left:-110px; margin-top: 2px ;height:16px; width: 15px " src="<?php echo base_url()?>images/delete.png" /><span style="position: absolute;margin:2px 0 0 12px">Cancel</span></button>
                 <button id="context_save_icon" onclick="save_send()" class="cupid-blue" style="margin: 0 0 0 -5px ;border-top-left-radius: 0px;font-size:16px;font-family:tahoma;border-bottom-left-radius: 0px;height:35px;"><img style=" position:relative; margin-left:-110px; margin-top: 2px ;height:16px; width: 15px " src="<?php echo base_url()?>images/publish.png" /><span style="position: absolute;margin:2px 0 0 12px">Publish</span> </button>
                </div>
                <div id="altToolBar"style="padding-left: 330px;">
                    <button id="context_save_icon" class="cupid-blue" style="border-top-right-radius: 0px;border-bottom-right-radius: 0px;padding-left: 55px;width: 100px;margin: 0 0 0 -1px ;font-size:16px;font-family:tahoma;height:35px;" onclick="removeEditor()"><img style=" position:relative; margin-left:-110px; margin-top: 2px ;height:16px; width: 15px " src="<?php echo base_url()?>images/save.png" /><span style="position: absolute;margin:2px 0 0 12px">Save</span></button>
                    <button id="context_cancel_icon" class="cupid-blue" style="padding-left: 55px;width: 100px;margin: 0 0 0 -5px ; -moz-border-radius: 0px;-webkit-border-radius: 0px;font-size:16px;font-family:tahoma;height:35px;" onclick="removeEditor_cancel()"><img style=" position:relative; margin-left:-110px; margin-top: 2px ;height:16px; width: 15px " src="<?php echo base_url()?>images/delete.png" /><span style="position: absolute;margin:2px 0 0 12px">Cancel</span></button>
                    <button id="insert_link" class="cupid-blue" style="margin: 0 0 0 -5px ; -moz-border-radius: 0px;-webkit-border-radius: 0px;font-size:16px;font-family:tahoma;height:35px;"><img style=" position:relative; margin-left:-110px; margin-top: 2px ;height:16px; width: 15px " src="<?php echo base_url()?>images/linkSit.png" /><span style="position: absolute;margin:2px 0 0 12px">Link Situation</span></button>
                    <button id="add_map" onclick="addMap()" class="cupid-blue" style="padding-left: 55px;width: 100px;margin: 0 0 0 -5px ; -moz-border-radius: 0px;-webkit-border-radius: 0px;font-size:16px;font-family:tahoma;height:35px;"><img style=" position:relative; margin-left:-110px; margin-top: 2px ;height:16px; width: 15px " src="<?php echo base_url()?>images/map.png" /><span style="position: absolute;margin:2px 0 0 12px">Map</span></button>
                    <button id="upload_img" class="cupid-blue" style="margin: 0 0 0 -5px ;border-top-left-radius: 0px;border-bottom-left-radius: 0px;font-size:16px;font-family:tahoma;height:35px;"><img style=" position:relative; margin-left:-110px; margin-top: 2px ;height:16px; width: 15px " src="<?php echo base_url()?>images/attachment.png" /><span style="position: absolute;margin:2px 0 0 12px">Attachment</span></button>
                </div>
            </div>

	</div>
        
	<!--Waiting Div-->
        <div id="waiting_div" style="width:100%;position:fixed;left:0;top:65px;display:none;z-index:10000 ">
        <div style="width:100px;margin:auto;color:white;background-color:gray">Please Waite ...</div>
        </div>
	<!---editor code-->
	<div id="editor" style="position:relative;"></div>
	
	<!---Situation-->
	<div id="Div1" style="background-color: rgba(255, 255, 255, 0.609375); resize: vertical; overflow: auto;position:absolute;min-height:550px;width:1250px;-moz-border-radius:3px;border-radius:3px;box-shadow: inset 1px 1px 3px;border-color:silver;border-style:solid;border-width:1px"><?php //echo $html;?></div>

	
	<script type="text/javascript">
	jQuery(document).ready(function () {
			//this is run onload
			document.getElementById('toolbar').style.display='none';
			document.getElementById('editor').style.visibility='none';
	});
	//for creating new situations
        var cut_close_listId=new Array();
	function enable_edit()
	{
                editMode=true;
		draging();//
		resizing();
                $("#altToolBar").hide();
		document.getElementById('toolbar').style.display='block';
		document.getElementById('editor').style.visibility='block';
                for(j=0;j<cut_close_listId.length;j++)
                {
                    $("#"+cut_close_listId[j]).show();
                }

                divContente = document.getElementsByClassName("hideOndb");
                for(var t in List_Contexts)
                {
                    var fl=new String(List_Contexts[t].flag);
                    if(fl.search("duplicate")==-1){
                         document.getElementById(List_Contexts[t].name).setAttribute("ondblclick", "createEditor('" + List_Contexts[t].name + "');");
                    }
                }
                /*for (t = 0; t < divContente.length; t++) {
                    divId = divContente[t].id;
                   
                }*/
                document.getElementById('Div1').style.resize='vertical';
                document.getElementById('Div1').style.minHeight='550px';
                $("#overlayHeader").show();
	}
	function disable_edit()
	{
                editMode=false;
		document.getElementById('toolbar').style.display='none';
		document.getElementById('editor').style.visibility='none';
                document.getElementById('Div1').style.resize='none';
                $("#overlayHeader").hide();
                location.reload(true);
	}
	</script>
	<script type="text/javascript">
			//<![CDATA[
			/*CKEDITOR.replace('editor1',
			{
				fullPage:true
			}
			
			);
			//]]>
			*/
	</script>
	
	
	
	
	
	
	

<!--scripts taps motion-->
<script type="text/javascript">
	var counter,div_counter;
	counter=0;
	div_counter= document.getElementById('tab_Menu').getElementsByTagName('div').length;
        var selectedSitId='';
        var previousSelected='';
	var sit_name='';
	var sit_privacy='';
	var sit_description='';
        var sit_html='';
        var sit_id='';
        var username='';
	var data="";
        var templete_used='false';
	//function to take array of situation titles and add them to taps
        var previous_templete_id='empty';
        var background_image='';
        function change_background(id)
        {
            if(id!='empty')
            {
                //document.getElementById("temp_"+previous_templete_id).style.backgroundColor='white';
                //document.getElementById("temp_"+id).style.backgroundColor='blue';
                document.getElementById("body_id").style.background = "url(<?php echo base_url()?>images/templete/"+id+".jpg) no-repeat center center fixed";
                document.getElementById("body_id").style.backgroundSize ='cover';
                document.getElementById("header_container").style.backgroundColor='transparent';
                background_image=id+'.jpg';
                //previous_templete_id=id;
            }
            else
            {
                
                document.getElementById("body_id").style.backgroundImage = 'none';
                document.getElementById("header_container").style.backgroundColor='#464646';
                background_image='';
                
            }
        }
        function change_templete(id)
        {
            if(id!='empty')
            {
                templete_used='true';
                document.getElementById('Div1').innerHTML="";
                loadhtml(id);
                for(var i=0;i<List_Contexts.length;i++)
                    {
                        List_Contexts[i].id='';
                        List_Contexts[i].situation_id='';
                        List_Contexts[i].flag= 'new';

                    }
                    sit_context_count=List_Contexts.length;
                    //sit_html=situation_from_controller.html;
                    sit_id='';
                    sit_name=document.getElementById('Name').value;
                    sit_privacy=document.getElementById('Privacy').value;
                    sit_description=document.getElementById('Desciption').value;
                //document.getElementById("temp_"+previous_templete_id).style.backgroundColor='white';
                //document.getElementById("temp_"+id).style.backgroundColor='blue';
                //document.getElementById("body_id").style.background = "url(<?php echo base_url()?>images/templete/"+id+".jpg) no-repeat center center fixed";
                //document.getElementById("body_id").style.backgroundSize ='cover';
                //document.getElementById("header_container").style.backgroundColor='transparent';
                //previous_templete_id=id;
            }
            else
            {
                templete_used='false';
                document.getElementById('Div1').innerHTML="";
                
                document.getElementById("body_id").style.backgroundImage = 'none';
                document.getElementById("header_container").style.backgroundColor='#464646';

            }
        }
	function addToTaps()
	{
                
		var situation_db_title = '<?php echo $situations; ?>';
		var situation_db_count = <?php echo $number_sit; ?>;
                

                sit_name='<?php echo $curr_sit_name; ?>';
                sit_description='<?php echo $curr_sit_desc; ?>';
		
                sit_id=<?php echo $curr_sit_id; ?>;
                sit_privacy='<?php echo $curr_sit_privacy; ?>';
                sit_context_count=<?php echo $context_count; ?>;
                username='<?php echo $username; ?>';
                document.getElementById('logout').innerHTML+=' '+username;

		var taps=document.getElementById('tab_Menu');
		var situation_array=situation_db_title.split(",");
		
		
		for(var i=0;i<situation_db_count;i++)
		{
			$situation_name=situation_array[i].split('#');
			var temp=taps.innerHTML;
			taps.innerHTML=temp+("<div id='"+$situation_name[1]+"' class='tap' title="+$situation_name[0]+" style='cursor:hand' onclick='loadhtml("+$situation_name[1]+")'>"+$situation_name[0]+"</div>");
			taps;
                        if(i==0)
                          {
                              selectedSitId=$situation_name[1];
                              previousSelected=$situation_name[1];
                              document.getElementById(selectedSitId).className='tapSelected';
                              setCookie('Situation',selectedSitId,31);
                          }
		}
		counter=0;
		div_counter= document.getElementById('tab_Menu').getElementsByTagName('div').length;
		//console.log(div_counter);
                //loadhtml(sit_id);
                if(selectedSitId=='')
                {
                    document.getElementById("edit_gear").style.display='none';
                    document.getElementById("editsituation").style.display='none';
                    document.getElementById("del_sit").style.display='none';
                    document.getElementById("add_friend").style.display='none';
                    document.getElementById("share_gear").style.display='none';
                    document.getElementById("export_sit").style.display='none';

                }
	}
	addToTaps();
	//console.log(data);
        function viewMod()
        {
         imgArray=document.getElementsByClassName("hideImg");
         copyImg=document.getElementsByClassName("copyClass");
           for(j=0;j<imgArray.length;j++)
           {
               imgId=imgArray[j].id;
               
               cut_close_listId.push(imgId);
               $("#"+imgId).hide();
               

           }
           for(cCounter=0;cCounter<copyImg.length;cCounter++)
           {
               
               $("#"+copyImg[cCounter].id).show();

           }
          divContente = document.getElementsByClassName("hideOndb");
            for (t = 0; t < divContente.length; t++) {
                divId = divContente[t].id;
                document.getElementById(divId).setAttribute("ondblclick",null);
            }

            /*divmod = document.getElementsByClassName("mod");
            for (tm = 0; tm < divmod.length; tm++) {
                modId = divmod[tm].id;
                $("#"+modId).hide();
            }*/
        }
            function gotofriend(id)
            {
                // saving the situation before going to the situation selected


                var url='<?php echo base_url()?>view/friendView/'+id;

                window.location.href=url;

            }
	function loadhtml(id)
	{
            setCookie("Situation",id,31);
            $('#showAllSitDiv').hide();
            selectedSitId=id;
            if(id!='0')
                document.getElementById(id).className='tapSelected';
            if(previousSelected!=''&previousSelected!=selectedSitId)
                document.getElementById(previousSelected).className='tap';
            previousSelected=id;
            
		var xmlHttp = getXMLHttp();				  
		xmlHttp.onreadystatechange = function()
		{
		if(xmlHttp.readyState == 4)
			{
			  HandleResponse(xmlHttp.responseText);
			}
		}
		//$param=document.getElementById('Div1');
		var url='<?php echo base_url()?>home/getSituation/';
                $("#waiting_div").show();
		$.post(url, { situation_id_to_retrieve_html: id },function(data) {
                    //alert(data);
                $("#waiting_div").hide();
                var callback_result_array=data.split("###");
                var contexts_from_controller = eval('(' + callback_result_array[0] + ')');
                var situation_from_controller = eval('(' + callback_result_array[1] + ')');
                count=contexts_from_controller.length;
                
                List_Contexts=contexts_from_controller;
                var html_situation='';
                for(var i=0;i<List_Contexts.length;i++)
                {
                    html_situation+=contexts_from_controller[i].html;
                }
                
		document.getElementById('Div1').innerHTML=html_situation;
                viewMod();
                document.getElementById('Div1').style.height=situation_from_controller.html;
                
                document.getElementById('Div1').style.resize='none';
                if(id!='0')
                {
                    if(situation_from_controller.sit_background_image!='')
                    {
                        
                        document.getElementById("body_id").style.background = "url("+'<?php echo base_url()?>images/templete/'+situation_from_controller.sit_background_image+") no-repeat center center fixed";
                        document.getElementById("body_id").style.backgroundSize ='cover';
                        document.getElementById("header_container").style.backgroundColor='transparent';
                        background_image= situation_from_controller.sit_background_image;
                    }
                    else
                    {

                        document.getElementById("body_id").style.backgroundImage = 'none';
                        document.getElementById("header_container").style.backgroundColor='#464646';
                        background_image='';
                    }

                }
                else
                {
                    document.getElementById("body_id").style.backgroundImage = 'none';
                    document.getElementById("header_container").style.backgroundColor='#464646';
                    background_image='';
                }


                //sit_id=id;
                sit_description=situation_from_controller.description;
                sit_context_count=situation_from_controller.context_count;
                //sit_html=situation_from_controller.html;
                sit_id=situation_from_controller.id;
                sit_name=situation_from_controller.name;
                sit_privacy=situation_from_controller.privacyType;
                //count=sit_context_count;
                //swapping if scrolled
                
                for(i=0;i<List_Contexts.length;i++)
                {
                     cid[i]="#o_"+List_Contexts[i].name;// saving the context id
                     cname[i]=  List_Contexts[i].name;
                }
                

		});
                
	}
	
	
	hidDivAllLoadSit(getCookie("Situation"));
	
	//$("search_txt").autocomplete(data);
	
	function show_search_option(element_x)
	{
		document.getElementById(element_x).style.visibility = 'visible';
	}
	function hide_search_option(element_x)
	{
		document.getElementById(element_x).style.visibility = 'hidden';
	}
	$('#search_txt').click(function() {
		document.getElementById('search_options').style.visibility = 'visible';
	});
	if (div_counter <= 6) {
		
		//$("#a").hide();
		document.getElementById('a').style.visibility = 'hidden';

		//$("#b").hide();
		document.getElementById('b').style.visibility = 'hidden';

		//$("#all").hide();
		document.getElementById('all').style.visibility = 'hidden';
	}
	if (counter == 0) {
		//$("#a").hide();//a= >>
		document.getElementById('a').style.visibility = 'hidden';
	}

	//rigth
	$("#a").click(function () {
		
			//$("#b").show();
			document.getElementById('b').style.visibility = 'visible';
			counter--;
			$("#tab_Menu").animate({ "left": "+=150px" }, "slow");
		
		if(counter==0)
		{
			//$("#a").hide();
			document.getElementById('a').style.visibility = 'hidden';
		}
		
		
		/*$("#b").show();
		right_counter++;
		$("#tab_Menu").animate({ "left": "+=152px" }, "slow");
	   var temp1 = div_counter - right_counter;
		if (temp1==temp) {
			$("#a").hide();

		}*/
	 
	});

	//left
	$("#b").click(function () {
			console.log(counter);
			//$("#a").show();
			document.getElementById('a').style.visibility = 'visible';
			
			counter++;
			$("#tab_Menu").animate({ "left": "-=150px" }, "slow");
		
		if (counter+6>=div_counter)
		{
			//$("#b").hide();
			document.getElementById('b').style.visibility = 'hidden';
		}
		
		/*
		$("#a").show();
		left_counter++;
		$("#tab_Menu").animate({ "left": "-=152px" }, "slow");
		temp = div_counter - left_counter;
		if (temp == 7) {
			$("#b").hide();
			//left_counter = 0;
		}*/

	});
	//trigger this function when enter key is pressed inside search box
	function searchKeyPress(e)
	{
			var index=0,animation_counter=0;
			var found;
			// look for window.event in case event isn't passed in
			if (window.event) { e = window.event; }
			if (e.keyCode == 13)
			{
				if(document.getElementById('local').checked ==true)
				{
					for(var i=0;i<div_counter;i++)
					{
						var tap_titles=document.getElementById('tab_Menu').getElementsByTagName('div')[i].innerText;
						var str=document.getElementById('search_txt').value;
						str=str;
						var patt1=new RegExp(str,"i");
						found=patt1.test(tap_titles);

						if(found)
						{

							/*if(animation_counter==0)
							{
								$("#tab_Menu").animate({ "left": "-=150px" }, "slow");
								$("#tab_Menu").animate({ "left": "+=150px" }, "slow");
							}*/
							var target=document.getElementById('tab_Menu').getElementsByTagName('div')[i].outerHTML;
							var first=document.getElementById('tab_Menu').getElementsByTagName('div')[index].outerHTML;
							document.getElementById('tab_Menu').getElementsByTagName('div')[i].outerHTML=first;
							document.getElementById('tab_Menu').getElementsByTagName('div')[index].outerHTML=target;
							index++;
							//animation_counter++;

						}

					}
                                        if(counter!=0)
                                        {
                                                $("#tab_Menu").animate({ "left": "+="+150*counter+"px"}, "fast");
                                                index=0;
                                                counter=0;
                                                document.getElementById('a').style.visibility = 'hidden';
                                                document.getElementById('b').style.visibility = 'visible';
                                        }


                                        loadhtml(document.getElementById('tab_Menu').getElementsByTagName('div')[0].id);
				}
                                else if (document.getElementById('public').checked ==true)
                                {
                                var str=document.getElementById('search_txt').value;
                                //sending the data to the controller    NOAM PUT UR CONTROLLER NAME HERE
                                var tokens = str.split(" ");

                                for(var i = 0 ; i < tokens.length ; i++)
                                    {
                                        tokens[i] = "'" + tokens[i]+ "'" ;
                                    }
                                var tokensString=tokens.join(",");
                                var url='<?php echo base_url()?>searchengine/publicsearch/';
                                  $.post(url, {tags:tokensString},function(data) {
                                    document.getElementById('Div1').innerHTML=data;
                                  });


                     }}
	}
	function searchKeyPress3(e)
	{
			var index=0,animation_counter=0;
			var found;
			// look for window.event in case event isn't passed in
			if (window.event) { e = window.event; }
			if (e.keyCode == 13)
			{
				if(true)
				{
					for(var i=0;i<div_counter;i++)
					{
						var tap_titles=document.getElementById('tab_Menu').getElementsByTagName('div')[i].innerText;
						var str=document.getElementById('search_txt').value;
						
						var patt1=new RegExp(str,"i");
						found=patt1.test(tap_titles);

						if(found)
						{
							//contain the position to go to
							var target,tcounter;
							if(i+3>div_counter||i<3||div_counter<7)
							{
								if(i<3||div_counter<7){
									target=0;
									tcounter=0;
								}
									
								else if(i+3>div_counter){
									target=(div_counter-6)*150;
									tcounter=div_counter-6;
								}
									
							}
							else{
								target=(i-3)*150;
								tcounter=i-3;
							}
								
							if(counter==0)
							{
								
								$("#tab_Menu").animate({ "left": "-="+target+"px" }, "fast");
								
							}
							else{
								target=target-(counter*150);
								if(target>0)
									$("#tab_Menu").animate({ "left": "-="+target+"px" }, "fast");
								else
									$("#tab_Menu").animate({ "left": "+="+(-target)+"px" }, "fast");
								
							}
							if(tcounter>3){
								document.getElementById('a').style.visibility = 'visible';
								if(div_counter-6<=tcounter)
									document.getElementById('b').style.visibility = 'hidden';
							}
							else if(tcounter==0){
								document.getElementById('b').style.visibility = 'visible';
								document.getElementById('a').style.visibility = 'hidden';
							}
							counter=tcounter;
							animation_counter++;
						}
					}
				}
			}
	}
	//search input and move the tab_menue bar.
	$('#search_txt').bind('keyup change blur', function() {
		// stuff to do when any of these events fire
		
	});
	
</script>
<!--dialog-situation-->
<!--create situation dialog content-->
<div id="sit-dialog-form" title="Create new Situation">
	<p id="validation_s" class="validateTips"></p>

	<form style="border-color:black">
	<fieldset style="border-style:hidden; padding-left:30px;color:white">
		<label for="Name">Name</label>
		<input style="display:block" type="text" name="Name" id="Name" class="text ui-widget-content ui-corner-all" /><br/>
		<label for="Privacy">Privacy</label><br/>
                <select id="Praivacy">
                    <option value="Public" selected>Public</option>
                    <option value="Private">Private</option>
                    <option value="Friends only">Friends only</option>
                </select>
                <br /><br />
		<label for="Desciption">Desciption</label>
		<input type="text" style="display:block;" name="Desciption" id="Desciption" value="" class="text ui-widget-content ui-corner-all" /><br/>
                <input type="checkbox"  id="suggestion"value="get"> Get Suggestion<br>
                <label for="sug" style="color:red"></label>
                <label for="back_img">Background Image</label>
                <br/>
                <br/>
		<table border="1">
                <tr>
                    <td><div id="div_empty"><img id="empty" style="height:50px;width:50px" onclick="change_background('empty')"></div></td>
                    <td><div id="temp_2"><img src="<?php echo base_url()?>images/templete/2.jpg" style="height:50px;width:50px" onclick="change_background(2)" /></div></td>
                    <td><div id="temp_3"><img src="<?php echo base_url()?>images/templete/3.jpg" style="height:50px;width:50px" onclick="change_background(3)"/></div></td>
                    <td><div id="temp_4"><img src="<?php echo base_url()?>images/templete/4.jpg" style="height:50px;width:50px" onclick="change_background(4)"/></div></td>
                    <td><div id="temp_6"><img src="<?php echo base_url()?>images/templete/6.jpg" style="height:50px;width:50px" onclick="change_background(6)"/></div></td>
                    <td><div id="temp_7"><img src="<?php echo base_url()?>images/templete/7.jpg" style="height:50px;width:50px" onclick="change_background(7)"/></div></td>


                </tr>
                <tr>
                    <td><div id="temp_9"><img src="<?php echo base_url()?>images/templete/9.jpg" style="height:50px;width:50px" onclick="change_background(9)"/></div></td>
                    <td><div id="temp_10"><img src="<?php echo base_url()?>images/templete/10.jpg" style="height:50px;width:50px" onclick="change_background(10)"/></div></td>
                    <td><div id="temp_1"><img src="<?php echo base_url()?>images/templete/1.jpg" style="height:50px;width:50px" onclick="change_background(1)"/></div></td>
                    <td><div id="temp_14"><img src="<?php echo base_url()?>images/templete/14.jpg" style="height:50px;width:50px" onclick="change_background(14)"/></div></td>
                    <td><div id="temp_15"><img src="<?php echo base_url()?>images/templete/15.jpg" style="height:50px;width:50px" onclick="change_background(15)"/></div></td>
                    <td><div id="temp_16"><img src="<?php echo base_url()?>images/templete/16.jpg" style="height:50px;width:50px" onclick="change_background(16)"/></div></td>

                </tr>

                </table>
                <br/>
                <div style="position: absolute;top:30px;right:65px">
                <label for="templete_img">Templete</label>
                <br/>
                <br/>
                <table border="1">
                <tr>
                    <td><div id="context_temp_empty"><img id="empty" style="height:50px;width:50px" onclick="change_templete('empty')" src="<?php echo base_url()?>images/templete/empty.png"></div></td>
                    <td><div id="context_temp_1"><img id="56" src="<?php echo base_url()?>images/templete/temp1.png" style="height:50px;width:50px" onclick="change_templete(56)" /></div></td>
                    <td><div id="context_temp_2"><img id="57" src="<?php echo base_url()?>images/templete/temp2.png" style="height:50px;width:50px" onclick="change_templete(57)"/></div></td>
                </tr>
                </table>
                </div>
	</fieldset>
	</form>
</div>
<script type="text/javascript">
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );
		
		var title1 = $( "#Name" ),
			tags1 = $( "#Description" ),
			Praivacy = $( "#Praivacy" ),
			allFields = $( [] ).add( title1 ).add( tags1 ).add( Praivacy ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
		
		$( "#sit-dialog-form" ).dialog({
			autoOpen: false,
			height: 600,
			width: 550,
			dialogClass: 'dialog_class',
			modal: true,
			buttons: {
				"Create Situation": function() {
					document.getElementById('validation_s').innerHTML="";
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkLength( title1, "Name", 3, 25 );
					bValid = bValid && checkRegexp( title1, /^[a-z]([0-9a-z ])+$/i, "Name may consist of a-z, 0-9, underscores, begin with a letter." );
					//bValid = bValid && checkLength( color1, "Color", 6, 6 );
					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/

					if ( bValid ) {
                                                sit_id='undefined';
                                                //if get suggestion is clicked
                                                suggestion=document.getElementById('suggestion').checked;
                                                if(suggestion)
                                                    {
                                                        document.getElementById('showAllSitDiv').innerHTML="";
                                                        $('#showAllSitDiv').show();
                                                       document.getElementById('showAllSitDiv').style.visibility="visible";
                                                       document.getElementById('showAllSit').style.visibility="visible";
                                                       document.getElementById('all').style.visibility="hidden";
                                                     sit_name=document.getElementById('Name').value;
                                                     var url='<?php echo base_url()?>home/getSuggestions/';
                                                     $("#waiting_div").show();
                                                     $.post(url, {sit_name:sit_name},function(data)
                                                         {
                                                          var sitArray=eval('(' + data + ')');
                                                          $("#waiting_div").hide();

                                                            var sit_id=sitArray.id;
                                                            var sit_name=sitArray.name;
                                                            var sit_description=sitArray.description;
                                                            var sit_list=   '<table id="mytable" cellspacing="0" ><caption>Situations List</caption><tr><th scope="col" abbr="Configurations" >Situation Name</th><th scope="col" abbr="Dual 2.5GHz">Description</th></tr>';
                                                          var i;
                                                          for(var i=0;i<sitArray.length;i++)
                                                                    {
                                                                        var ids=sitArray[i].id;
                                                                        ids=ids*10;
                                                                        sit_list+="<tr><th id='"+ids+"' style='cursor:hand'  onclick='gotofriend("+sitArray[i].id+")'  scope='row' class='spec'>"+sitArray[i].name+"</th>  ><td>"+sitArray[i].description+"</td></tr>";
                                                        //sit_list+="<li id='"+sitArray[i].id+"' class='tap' style='cursor:hand' onclick='hidDivAllLoadSit("+sitArray[i].id+")'  >"+sitArray[i].name+'--'+sitArray[i].privacyType+'--'+sitArray[i].description+'--'+sitArray[i].contextNo+"</li>";


                                                                    }
                                                                    sit_list+='<tfoot><tr> <th scope="row">Total</th><td colspan="4">'+i+'</td></tr></tfoot></table>';


                                                                      if(i==0)document.getElementById('showAllSitDiv').innerHTML="<h3 style='color:white;text-align:center' >No public situation Found!</h3>";
                                                                      else document.getElementById('showAllSitDiv').innerHTML=sit_list;

                                                                      document.getElementById('showAllSitDiv').innerHTML +='<img src="<?php echo base_url();?>images/download.png" onclick="hideAllSit()" style="position:absolute;height:40px;margin-right:30px;top:20;right:0px">';
                                                         });
                                                         
                                                         }
						//if click create situation
						//enable_edit();
						sit_name=document.getElementById('Name').value;
						sit_privacy=$('#Praivacy').val();
						sit_description=document.getElementById('Desciption').value;
						

						$( this ).dialog( "close" );
						document.getElementById('validation_s').innerHTML="";
                                                if(templete_used=='false')
                                                {
                                                    document.getElementById('Div1').innerHTML="";
                                                    count=0;
                                                    List_Contexts=new Array();
                                                    document.getElementById('Div1').style.height='550px';
                                                }
                                                else
                                                    {
                                                        for(var i=0;i<List_Contexts.length;i++)
                                                        {
                                                            List_Contexts[i].id='';
                                                            List_Contexts[i].situation_id='';
                                                            List_Contexts[i].flag= 'new';

                                                        }
                                                        sit_context_count=List_Contexts.length;
                                                        //sit_html=situation_from_controller.html;
                                                        sit_id='undefined';
                                                        //sit_name=document.getElementById('Name').value;
                                                        //sit_privacy=document.getElementById('Privacy').value;
                                                        //sit_description=document.getElementById('Desciption').value;
                                                    }
                                                
						save_send();
					}
                                        
				},
				Cancel: function() {
					$( this ).dialog( "close" );
                                        if(templete_used=='true')
                                            location.reload(true);
                                        location.reload(true);
					document.getElementById('validation_s').innerHTML="";
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
                                if(templete_used=='true')
                                    //location.reload(true);
                                //location.reload(true);
                                document.getElementById('validation_s').innerHTML="";
			}
		});
		
		
	});	
	$( "#add" ).click(function() {
				document.getElementById('validation_s').innerHTML="";
                                sit_id='undefined';
                                loadhtml(0);
                                document.getElementById("body_id").style.backgroundImage = 'none';
                                document.getElementById("header_container").style.backgroundColor='#464646';
                                background_image='';
				$( "#sit-dialog-form" ).dialog( "open" );
	});
	</script>


<!--cutContext-->
<div id="cutContext" title="Move Context">
	<p id="validation_cut" class="validateTips"></p>

	<form style="border-color:black">
	<fieldset style="border-style:hidden; padding-left:30px;color:white">

                <label for="moveContext">Move Context To:</label>
                <br/>
                <select id="sit_Id" SIZE="10" style="width:280px">
                    
                </select>

	</fieldset>
        </form>
</div>

<script type="text/javascript">

	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );

		var sitId = $( "#sit_Id" ),
			allFields = $( [] ).add(sitId ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}

		$( "#cutContext" ).dialog({
			autoOpen: false,
			height: 350,
			width: 400,
			dialogClass: 'dialog_class',
			modal: true,
			buttons: {
				"Move": function() {
					document.getElementById('validation_cut').innerHTML="";
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

                                        //bValid = bValid && checkLength( sitName, "sitName", 3, 16 );
					//bValid = bValid && checkRegexp( sitName, /^[a-z]([0-9a-z_])+$/i, "Name may consist of a-z, 0-9, underscores, begin with a letter." );

					if ( bValid ) {
						//if click create situation





                                                /*var url='<?php echo base_url()?>home/editSituation/';

                                                $.post(url, {sitName:sitName.val(),sitPraivacy:sitPraivacy.val(),sitDesciption:sitDesciption.val(),sitId:selectedSitId},
                                                function(data) {});

                                                $( this ).dialog( "close" );*/
                                                var target_situation_move=$( "#sit_Id" ).val();
                                                var context_id_cuting='';
                                                var found_at='';
                                                for(var i=0;i<List_Contexts.length;i++)
                                                {
                                                    if(List_Contexts[i].name==cutted_element)
                                                    {
                                                        context_id_cuting=List_Contexts[i].id;
                                                        found_at=i;
                                                        break;
                                                    }
                                                }
                                                
                                                if(List_Contexts[found_at].flag=='new')
                                                {
                                                    List_Contexts[found_at].situation_id=target_situation_move;
                                                    List_Contexts[found_at].flag='newCutted';
                                                }
                                                else
                                                {
                                                    List_Contexts[found_at].situation_id=target_situation_move;
                                                    List_Contexts[found_at].flag='cutted';
                                                }
                                                var url='<?php echo base_url()?>ccd/cut/';
                                                   /* $.post(url, { context_id: context_id_cuting },
                                                    function(data)
                                                    {

                                                    });*/
                                                    $( this ).dialog( "close" );
                                                    save_send();
                                                    disable_edit();
                                                    setTimeout('loadhtml('+target_situation_move+')',500);
                                                    //enable_edit();
                                                    //draging();
                                                    //resizing();  
					}
				},
				Cancel: function() {

					$( this ).dialog( "close" );
					document.getElementById('validation_cut').innerHTML="";
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
				document.getElementById('validation_cut').innerHTML="";
			}
		});


	});
	//$( "#cutImg" ).click(function() {
				//document.getElementById('validation_sit').innerHTML="";

				//$( "#cutContext" ).dialog( "open" );
	//});


	</script>


<!--end-->
<!--copyContext-->
<div id="copyContext" title="Move Context">
	<p id="validation_copy" class="validateTips"></p>

	<form style="border-color:black">
	<fieldset style="border-style:hidden; padding-left:30px;color:white">
                <label for="new_copy_name">New Name:</label>
                <br/>
                <input type="text" id="new_copy_name"/>
                <br/>
                <label for="moveContext">Copy Context To:</label>
                <br/>
                <select id="sit_Id_copy" SIZE="10" style="width:280px">
                    
                </select>
                <br /><br />
                <input id="type" name="type" type="radio" value="dublicate" >Duplicate 
                <input id="type" name="type" type="radio" value="copy" checked="true" /> Copy
	</fieldset>
        </form>
</div>

<script type="text/javascript">
        var new_copy_name="";
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );

		var name = $( "#new_copy_name" ),
			allFields = $( [] ).add(name ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}

		$( "#copyContext" ).dialog({
			autoOpen: false,
			height: 450,
			width: 400,
			dialogClass: 'dialog_class',
			modal: true,
			buttons: {
				"Add": function() {
					document.getElementById('validation_copy').innerHTML="";
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

                                        bValid = bValid && checkLength( name, "new_copy_name", 3, 16 );
					//bValid = bValid && checkRegexp( sitName, /^[a-z]([0-9a-z_])+$/i, "Name may consist of a-z, 0-9, underscores, begin with a letter." );

					if ( bValid ) {
						
                                                var target_situation_move=$( "#sit_Id_copy" ).val();
                                                new_copy_name=$( "#new_copy_name" ).val();
                                                var context_id_cuting='';
                                                var found_at='';
                                                for(var i=0;i<List_Contexts.length;i++)
                                                {
                                                    if(List_Contexts[i].name==cutted_element)
                                                    {
                                                        context_id_cuting=List_Contexts[i].id;
                                                        found_at=i;
                                                        break;
                                                    }
                                                }
                                                if($("#type:checked").val()=="dublicate"){
                                                    //duplicate(context_id_cuting,target_situation_move);
                                                    List_Contexts[found_at].situation_id=target_situation_move;
                                                    List_Contexts[found_at].flag='duplicate';
                                                }
                                                else{
                                                    if(List_Contexts[found_at].flag=='new')
                                                    {
                                                        List_Contexts[found_at].situation_id=target_situation_move;
                                                        List_Contexts[found_at].flag='newCopy';
                                                    }
                                                    else
                                                    {
                                                        List_Contexts[found_at].situation_id=target_situation_move;
                                                        List_Contexts[found_at].flag='copy';
                                                    }
                                                    var url='<?php echo base_url()?>ccd/cut/';
                                                       /* $.post(url, { context_id: context_id_cuting },
                                                        function(data)
                                                        {

                                                        });*/
                                                       
                                                }
                                                $( this ).dialog( "close" );
                                                save_send();
                                                //disable_edit();
                                                //setTimeout('loadhtml('+target_situation_move+')',500);
                                                
					}
				},
				Cancel: function() {

					$( this ).dialog( "close" );
					document.getElementById('validation_copy').innerHTML="";
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
				document.getElementById('validation_copy').innerHTML="";
			}
		});


	});
	


	</script>


<!--end-->


<!--upload-->
<div id="upload_dialog" title="Upload">
	<p id="validation_cut" class="validateTips"></p>
        <input type="file" name="file_upload" id="file_upload" style="float:left" />
        <br/>
        <input type="file" name="image_upload" id="image_upload"  />
        <br/>
        <input type="file" name="video_upload" id="video_upload"  />
</div>

<script type="text/javascript">

	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );

		//var sitId = $( "#sit_Id" ),
		//	allFields = $( [] ).add(sitId ),
		//	tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}

		$( "#upload_dialog" ).dialog({
			autoOpen: false,
			height: 350,
			width: 400,
			dialogClass: 'dialog_class',
			modal: true,
			close: function() {
				//allFields.val( "" ).removeClass( "ui-state-error" );
				document.getElementById('validation_cut').innerHTML="";
			}
		});


	});
	$( "#upload_img" ).click(function() {
				document.getElementById('validation_sit').innerHTML="";

				$( "#upload_dialog" ).dialog( "open" );
	});


	</script>
<!--map-->
<div id="map_dialog" title="Map Component">
	<p id="validation_cut" class="validateTips"></p>
        <table>
	<tr>
	<td>
		<div id="mapDiv" style="width:500px;height:400px;"></div>
	</td>
	<td>
	<table>
		<tr>
		<td><b>Address</b><br/><input id="gmap_address" type="text" class="inputs" onchange="getAddress()" /></td></tr>
		<tr><td><b>Width</b><br/><input id="gmap_width" type="text" class="inputs" value="500" /></td></tr>
		<tr><td><b>Height</b><br/><input id="gmap_height" type="text" class="inputs" value="400" /></td></tr>
		<tr><td><b>Zoom</b><br/><select id="gmap_zoom"  ><option value="1">1 (Far)</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8" >8</option><option value="9">9</option><option value="10">10</option><option value="11" selected="selected">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15" >15</option><option value="16">16</option><option value="17">17 (Close)</option></select></td></tr>

		<tr><td><input id="gmap_overview" type="checkbox"  /><b>Show Overview</b></td></tr>
		<tr><td><input id="gmap_scale" type="checkbox" /><b>Show Scale</b></td></tr>
		<tr><td><input id="gmap_marker" type="checkbox" /><b>Show Marker</b></td></tr>
		<tr><td><b>Longitude</b><br/><input id="gmap_lng" type="text" value="50.107" /></td></tr>
		<tr><td><b>Latitude</b><br/><input id="gmap_lat" type="text" value="26.376" /></td></tr>
		<tr><td  align="center"><input type="button" value="preview" onclick="loadScript()" style="border:0;width:90px;height:30px;margin-right:5px;" />
			<input type="button" value="Add" onclick="addmaptocontex()" style="border:0;width:90px;height:30px" /></td></tr>
	</table>
	</td>
	</tr>

	</table>

</div>

<script type="text/javascript">

	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );

		//var sitId = $( "#sit_Id" ),
		//	allFields = $( [] ).add(sitId ),
		//	tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}

		$( "#map_dialog" ).dialog({
			autoOpen: false,
			height: 650,
			width: 790,
			dialogClass: 'dialog_class',
			modal: true,
			close: function() {
				//allFields.val( "" ).removeClass( "ui-state-error" );
				document.getElementById('validation_cut').innerHTML="";
			}
		});


	});
	

	</script>

<!--Add Situation Link-->
<div id="addLink" title="Add Link">
	<p id="validation_addLink" class="validateTips"></p>

	<form style="border-color:black">
	<fieldset style="border-style:hidden; padding-left:30px;color:white">

                <label for="sit_Id_link">Choose Situation to add it's Link:</label>
                <br/>
                <select id="sit_Id_add" SIZE="10" style="width:280px">

                </select>

	</fieldset>
        </form>
</div>

<script type="text/javascript">
        getAllSit_ddlist_copy();
        $("#insert_link").click(function(){$( "#addLink" ).dialog( "open" );});

	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );

		var sitId = $( "#sit_Id_add" ),
			allFields = $( [] ).add(sitId ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}

		$( "#addLink" ).dialog({
			autoOpen: false,
			height: 370,
			width: 400,
			dialogClass: 'dialog_class',
			modal: true,
			buttons: {
				"Add Link": function() {
					document.getElementById('validation_addLink').innerHTML="";
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

                                        //bValid = bValid && checkLength( sitName, "sitName", 3, 16 );
					//bValid = bValid && checkRegexp( sitName, /^[a-z]([0-9a-z_])+$/i, "Name may consist of a-z, 0-9, underscores, begin with a letter." );

					if ( bValid ) {

                                                var situation_id=$( "#sit_Id_add" ).val();
                                                removeEditor();
                                                //add link to context
                                                var link=document.createElement("a");
                                                link.href="<?php echo base_url(); ?>view/friendView/"+situation_id;
                                                var select=document.getElementById("sit_Id_add");
                                                link.innerText=select.options[select.selectedIndex].text;
                                                
                                                document.getElementById(elementRef).appendChild(link);
                                                enable_edit();
                                                createEditor(elementRef);
                                                $( this ).dialog( "close" );





					}
				},
				Cancel: function() {

					$( this ).dialog( "close" );
					document.getElementById('validation_addLink').innerHTML="";
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
				document.getElementById('validation_addLink').innerHTML="";
			}
		});


	});



	</script>

<!--end-->
<!-- editContextInfo-->
<div id="editContextInfo" title="Edit Context Information">
			<p id="validation_c"class="validateTips"></p>

			<form>
			<fieldset style="border-style:hidden; padding-left:30px;color:white">
				<label for="etitle">Title</label>
				<input style="display:block" type="text" name="etitle" id="etitle" class="text ui-widget-content ui-corner-all" /><br/>
				<label for="etags">Tags</label>
				<input style="display:block" type="text" name="etags" id="etags" value="" class="text ui-widget-content ui-corner-all" /><br/>
				<label for="ecolor">Color</label>
				<input style="display:block" type="text" name="ecolor" id="ecolor" value="#ffffff" class="color" />
			</fieldset>
			</form>
		</div>
<script type="text/javascript">
                      var context_editing;
                      var editMode=false;
			$(function() {

				// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
				$( "#dialog:ui-dialog" ).dialog( "destroy" );
				var title1 = $( "#etitle" ),
					tags1 = $( "#etags" ),
					color1 = $( "#ecolor" ),
					allFields = $( [] ).add( title1 ).add( tags1 ).add( color1 ),
					tips = $( ".validateTips" );

				function updateTips( t ) {
					tips
						.text( t )
						.addClass( "ui-state-highlight" );
					setTimeout(function() {
						tips.removeClass( "ui-state-highlight", 1500 );
					}, 500 );
				}

				function checkLength( o, n, min, max ) {
					if ( o.val().length > max || o.val().length < min ) {
						o.addClass( "ui-state-error" );
						updateTips( "Length of " + n + " must be between " +
							min + " and " + max + "." );
						return false;
					} else {
						return true;
					}
				}

				function checkRegexp( o, regexp, n ) {
					if ( !( regexp.test( o.val() ) ) ) {
						o.addClass( "ui-state-error" );
						updateTips( n );
						return false;
					} else {
						return true;
					}
				}

				$( "#editContextInfo" ).dialog({
					autoOpen: false,
					height: 310,
					width: 400,
					dialogClass: 'dialog_class',
					modal: true,
					buttons: {
						"Submit Changes": function() {
							document.getElementById('validation_c').innerHTML="";
							var bValid = true;
							allFields.removeClass( "ui-state-error" );

							bValid = bValid && checkLength( title1, "Title", 3, 16 );
							bValid = bValid && checkRegexp( title1, /^[a-z]([0-9a-z_])+$/i, "Title may consist of a-z, 0-9, underscores, begin with a letter." );
							bValid = bValid && checkLength( color1, "Color", 6, 6 );
							// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/

							if ( bValid ) {
								//if click submit
                                                                var nm=context_editing.name;
                                                                nm=nm.substring(nm.lastIndexOf("_"),nm.length);
                                                                var name=context_editing.name.substring(0,context_editing.name.lastIndexOf("_"));
                                                                var cid=context_editing.id;
								title=document.getElementById("etitle").value+nm;
								tags=document.getElementById("etags").value;
								color=document.getElementById("ecolor").value;
                                                                //html editing
                                                                document.getElementById(context_editing.name).style.backgroundColor=color;
                                                                destroyResizing();
                                                                var ehtml=document.getElementById("o_"+context_editing.name).outerHTML;
                                                                var pattr=new RegExp(name,"g");
                                                                ehtml=ehtml.replace(pattr, document.getElementById("etitle").value);
                                                                //edit context object in List_Context
                                                                document.getElementById("o_"+context_editing.name).outerHTML=ehtml;
                                                                context_editing.name=title;
                                                                context_editing.tags=tags;
                                                                context_editing.color=color;
                                                                if(editMode){
                                                                    destroyResizing();
                                                                    resizing();
                                                                    draging();
                                                                    
                                                                }
                                                                else{
                                                                    if(context_editing.flag != "new"){
                                                                        var url='<?php echo base_url(); ?>/home/updateContext';
                                                                        $("#waiting_div").show();
                                                                        $.post(url, {cid:cid,title:title,tags:tags,color:color,html:ehtml},function(data){$("#waiting_div").hide();});

                                                                    }
                                                                }
                                                                    


								$( this ).dialog( "close" );
								document.getElementById('validation_c').innerHTML="";

							}
						},
						Cancel: function() {
							document.getElementById('validation_c').innerHTML="";
							$( this ).dialog( "close" );
							document.getElementById('validation_c').innerHTML="";
						}
					},
					close: function() {
						document.getElementById('validation_c').innerHTML="";
						allFields.val( "" ).removeClass( "ui-state-error" );
						document.getElementById('validation_c').innerHTML="";
					}
				});


			});
                        function edit_context(to_edit_context){
                            for (var i = 0; i <= count; i++) {
                                if(typeof (List_Contexts[i])  != 'undefined'||List_Contexts[i]!=null)
                                {
                                    if(List_Contexts[i].name==to_edit_context)
                                    {
                                        context_editing=List_Contexts[i];
                                        break;
                                    }
                                }
                            }
                            if(typeof (context_editing)  != 'undefined'){
                                var nm=context_editing.name;
                                document.getElementById("etitle").value=nm.substring(0,nm.lastIndexOf("_"));
                                document.getElementById("etags").value=context_editing.tags;
                                document.getElementById("ecolor").value=context_editing.color;
                                document.getElementById("ecolor").style.backgroundColor =context_editing.color;
                            }
                            
                            document.getElementById('validation_c').innerHTML="";
                            $( "#editContextInfo" ).dialog( "open" );
                        }
			</script>

<!--end-->
<script type="text/javascript" >

    function deleteFriendPost(fid,sid){

     var url='<?php echo base_url()?>userprofile/deleteFriend';
                                          $.post(url, {friend_email: fid , sit_id: sid}
                                        ,function(data1) {
                                            viewfriend();
                                           
                                        });
                                        }
</script>
<!--hussam work-->

<!-- Confirmation box HTML code -->
 <!-- confirmation box -->
    <div id="confirmOverlay" >
    <div id="confirmBox">

        <h1 id="hconf"style="margin-top:0px">Title of the confirm dialog</h1>
        <p id="pconf" style="text-align: center">Description of what is about to happen</p>

        <div id="confirmButtons">
            <a class="button blue" onclick=" " id="yes" style="visibility:visible">Ok<span></span></a>
            <a class="button gray" id="no" style="visibility:visible">Cancel<span></span></a>
        </div>
    </div>
</div>

<!-- houssam confirmation box -->
 <script type="text/javascript">
$("#confirmOverlay").hide();
 function showcinf(h,p,click,button,hide) // buttion =true means that the two button will be displayed
 {
     

       $("#confirmOverlay").show();
      document.getElementById('hconf').innerText=h;
      document.getElementById('pconf').innerText=p;
      if(button)
          {

              document.getElementById('yes').setAttribute('onclick',click);
              document.getElementById('no').setAttribute('onclick',hide);
          }
     else if(!button)
         {
              document.getElementById('yes').setAttribute('onclick',click);
              document.getElementById('no').style.visibility='hidden';
         }
    // $("#confirmOverlay").hide();

 }

 function hideme()
 {
     $("#confirmOverlay").hide();
 }





 </script>
<!-- editSituationInfo-->
<div name="hh" id="editSituationInfo" title="Edit Situation Information">
	<p id="validation_sit" class="validateTips"></p>

	<form name="test" id="test"style="border-color:black">
	<fieldset id="ee" name="ee" style="border-style:hidden; padding-left:30px;color:white">
		<label for="sitName">Situation Name</label>
		<input style="display:block" type="text" name="sitName" id="sitName" class="text ui-widget-content ui-corner-all" /><br/>
                <label for="sitPraivacy">Praivacy Type</label>
                <br/>
                <select id="sitPraivacy">
                    <option value="Public">Public</option>
                    <option value="Private">Private</option>
                    <option value="Friends only">Friends only</option>
                </select>
                <br/>
                <br/>
                <label for="sitDesciption">Desciption</label>
		<input type="text" style="display:block" name="sitDesciption" id="sitDesciption" value="" class="text ui-widget-content ui-corner-all" /><br/>
                <label for="back_img">Background Image</label>
                <br/>
                <br/>
		<table border="1">
                <tr>
                    <td><div id="div_empty"><img id="empty" style="height:50px;width:50px" onclick="change_background('empty')"></div></td>
                    <td><div id="temp_2"><img src="<?php echo base_url()?>images/templete/2.jpg" style="height:50px;width:50px" onclick="change_background(2)" /></div></td>
                    <td><div id="temp_3"><img src="<?php echo base_url()?>images/templete/3.jpg" style="height:50px;width:50px" onclick="change_background(3)"/></div></td>
                    <td><div id="temp_4"><img src="<?php echo base_url()?>images/templete/4.jpg" style="height:50px;width:50px" onclick="change_background(4)"/></div></td>
                    <td><div id="temp_6"><img src="<?php echo base_url()?>images/templete/6.jpg" style="height:50px;width:50px" onclick="change_background(6)"/></div></td>
                    <td><div id="temp_7"><img src="<?php echo base_url()?>images/templete/7.jpg" style="height:50px;width:50px" onclick="change_background(7)"/></div></td>


                </tr>
                <tr>
                    <td><div id="temp_9"><img src="<?php echo base_url()?>images/templete/9.jpg" style="height:50px;width:50px" onclick="change_background(9)"/></div></td>
                    <td><div id="temp_10"><img src="<?php echo base_url()?>images/templete/10.jpg" style="height:50px;width:50px" onclick="change_background(10)"/></div></td>
                    <td><div id="temp_1"><img src="<?php echo base_url()?>images/templete/1.jpg" style="height:50px;width:50px" onclick="change_background(1)"/></div></td>
                    <td><div id="temp_14"><img src="<?php echo base_url()?>images/templete/14.jpg" style="height:50px;width:50px" onclick="change_background(14)"/></div></td>
                    <td><div id="temp_15"><img src="<?php echo base_url()?>images/templete/15.jpg" style="height:50px;width:50px" onclick="change_background(15)"/></div></td>
                    <td><div id="temp_16"><img src="<?php echo base_url()?>images/templete/16.jpg" style="height:50px;width:50px" onclick="change_background(16)"/></div></td>

                </tr>

                </table>

	</fieldset>
	</form><p id="validation_f" class="validateTips"></p>
</div>

<script type="text/javascript">

	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );

		var sitName = $( "#sitName" ),
                 sitPraivacy = $( "#sitPraivacy" ),
                 sitDesciption = $( "#sitDesciption" ),
			allFields = $( [] ).add(sitName ).add( sitPraivacy ).add( sitDesciption ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}

		$( "#editSituationInfo" ).dialog({
			autoOpen: false,
			height: 550,
			width: 500,
			dialogClass: 'dialog_class',
			modal: true,
			buttons: {
				"Save": function() {
					document.getElementById('validation_sit').innerHTML="";
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

                                        bValid = bValid && checkLength( sitName, "sitName", 3, 25 );
					bValid = bValid && checkRegexp( sitName, /^[a-z]([0-9a-z_])+$/i, "Name may consist of a-z, 0-9, underscores, begin with a letter." );

					if ( bValid ) {


                                                var tabName = document.getElementById('sitName').value;
                                                var xmlHttp = getXMLHttp();
                                                xmlHttp.onreadystatechange = function()
                                                {
                                                if(xmlHttp.readyState == 4)
                                                        {
                                                          HandleResponse(xmlHttp.responseText);
                                                        }
                                                }
                                                //$param=document.getElementById('Div1');

                                                var url='<?php echo base_url()?>home/editSituation/';
                                                $("#waiting_div").show();
                                                $.post(url, {sitName:sitName.val(),sitPraivacy:sitPraivacy.val(),sitDesciption:sitDesciption.val(),sitId:selectedSitId,back_img:background_image},function(data) {
                                                $("#waiting_div").hide();
                                                state=data;

                                                if(data==1)
                                                document.getElementById(selectedSitId).innerHTML=tabName;
                                        });

                                                $( this ).dialog( "close" );

					}
				},
				Cancel: function() {

					$( this ).dialog( "close" );
					document.getElementById('validation_sit').innerHTML="";
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
				document.getElementById('validation_sit').innerHTML="";
			}
		});


	});
	$( "#editsituation" ).click(function() {
				document.getElementById('validation_sit').innerHTML="";

				$( "#editSituationInfo" ).dialog( "open" );
	});


	</script>

<!--end-->

<!--Export-->
<div id="export" title="Export HTML or pdf?">
	Choose Format of file..
</div>
<script>
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );

		$( "#export" ).dialog({
                        autoOpen: false,
			resizable: false,
			height:140,

			modal: true,
			buttons: {
				"HTML": function() {
                                        exportHTML();
					$( this ).dialog( "close" );
				},
                                "PDF": function() {
                                        exportPDF();
					$( this ).dialog( "close" );
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			}
		});
	});
        $( "#export_sit" ).click(function(){
            $( "#export" ).dialog( "open" );
        } );
        function exportHTML(){

            var url="<?php echo base_url(); ?>home/saveAsHtml/"+selectedSitId;
            document.getElementById("iframy").src=url;
        }
        function exportPDF(){
            var url="<?php echo base_url(); ?>home/saveAsPdf/"+selectedSitId;
            document.getElementById("iframy").src=url;
        }
	</script>
<!--end-->

<!-- editProfileInfo-->
<div  id="editProfileInfo" title="Profile Information">
	<p id="validation_pro" class="validateTips"></p>

	<form  style="border-color:black">
	<fieldset style="border-style:hidden; padding-left:30px;color:white">
            <div ><div id="fName" onclick="edit()"></div></div>
            <div ><div id="lName" onclick="edit()"></div></div>
            <div ><div id="dBirth" onclick="edit()"></div></div>
            <div ><input type="checkbox"  id="notif"value=""onclick="edit()"> Notifiable<br></div>
            <div ><div id="password" onclick="edit()" >******</div></div>
            <div ><input id="newP" type="password" placeholder="new password" style="visibility:hidden" /></div>
            <div ><input id="newPConf" type="password" placeholder="confirm password" style="visibility:hidden"/></div>


            <div id="buttonDivcountainer"style=" position: absolute;right:20px; bottom:15px; visibility: hidden">
                <input onclick="d(0)" type="button" id="saveChanges" name="Save Changes" value="Save Changes" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
                <input onclick="d(1)" type="button" id="cancel" name="Cancel" value="Cancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>


            </div>
        </fieldset>
	</form>
</div>

<script type="text/javascript">

     var idd = 'id';counter_prof_tag=0;
     var idArray= new Array();
     var fn='';
     var ln='';
     var pw='';
     var dbir='';
     var notif='';

     // this is for confirmaion message
//     $( "#dialog:ui-dialog" ).dialog( "destroy" );
//     $(function() {s
//		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
//		$( "#dialog:ui-dialog" ).dialog( "destroy" );
//
//		$( "#dialog-message" ).dialog({
//			modal: true,
//			buttons: {
//				Ok: function() {
//					$( this ).dialog( "close" );
//				}
//			}
//		});
//	});
//




    function edit() {//edit personal info
        counter_prof_tag=0;
        document.getElementById('buttonDivcountainer').style.visibility='visible';
        document.getElementById('newPConf').style.visibility='visible';
        document.getElementById('newP').style.visibility='visible';
        idArray=["fName","lName","dBirth","password",'notif'];
        for(i=0;i<5;i++)
            {
                idd = 'id';
                var temp = document.getElementById(idArray[i]).innerHTML;
                var elem = document.getElementById(idArray[i]);
                var children = elem.childNodes;
                var parent = elem.parentNode;
                var newNode = document.createElement("input");
                idd=idd+counter_prof_tag;
                counter_prof_tag++;
                if(i==3)
                   {
                        newNode.setAttribute('type','password');
                        newNode.setAttribute('placeholder',"old password");
                   }

                if(i==4)
                    {
                        newNode.setAttribute('type','checkbox');
                        newNode.setAttribute('value','notifiable');
                    }
                newNode.setAttribute('id', idd);
                newNode.appendChild(children[0]);
                parent.replaceChild(newNode, elem);
                //if(i!=3)
                document.getElementById(idd).value = temp;
            }
    }


    function d(c) {
        notify='';
        idArray=["id0","id1","id2","id3","id4"];
        fn=document.getElementById('id0').value;
        ln=document.getElementById('id1').value;
        pw=document.getElementById('id3').value;
        dbir=document.getElementById('id2').value;
        notif=document.getElementById('id4').checked;
        if(notif)
         {
             notify='notifiable';
         }
         else
         {
             notify='notnotifiable';
         }

        emailAdd=username;

        if(document.getElementById('id3').value=="******"&&document.getElementById('newP').value==''&&document.getElementById('newPConf').value=='')
            {

                var url='<?php echo base_url()?>userprofile/updateProfileNOP/';
                $("#waiting_div").show();
                $.post(url, {email:emailAdd,fname:fn,lname:ln,dateOfBirth:dbir,notif:notify},function(){$("#waiting_div").hide();});


            }
        else
            {
              if(document.getElementById('newP').value!=''&&document.getElementById('newPConf').value!=''&&document.getElementById('newP').value==document.getElementById('newPConf').value&&document.getElementById('id3').value!="******")
                  {
                      var new_pass=document.getElementById('newP').value;
                      var old_pas=document.getElementById('id3').value;
                      //document.getElementById('Div1').innerHTML=document.getElementById('newP').value+'  '+document.getElementById('id3').value;
                     var url='<?php echo base_url()?>userprofile/updateProfileWP/';
                     $("#waiting_div").show();
                     $.post(url, {email:emailAdd,fname:fn,lname:ln,dateOfBirth:dbir,password_new:new_pass,password_old:old_pas,notif:notify}
                     ,function (data)
                     {
                         $("#waiting_div").hide();
                         //alert(data);
                         if(data==false)
                             {
                                 //document.getElementById().innerHTML='';//notification message
                             }
                     });

                  }
            }


        for(i=0;i<5;i++)
            {

                if(i==0)
                    newDivId="fName";
                else if(i==1)
                    newDivId="lName";
                else if(i==2)
                    newDivId="dBirth";
                else if(i==3)
                    newDivId="password";
                else if (i==4)
                    newDivId="notif"
                var temp = document.getElementById(idArray[i]).value;
                var elem = document.getElementById(idArray[i]);
                var children = elem.childNodes;
                var parent = elem.parentNode;
                var newNode = document.createElement("div");
                newNode.setAttribute('id', newDivId);
                newNode.setAttribute('onclick', "edit()");
                newNode.appendChild(children[0]);
                parent.replaceChild(newNode, elem);
                document.getElementById(newDivId).innerHTML = temp;
                if(i==3)
                document.getElementById(newDivId).innerHTML = '******';

            }
            document.getElementById('newPConf').style.visibility='hidden';
            document.getElementById('newP').style.visibility='hidden';
            document.getElementById('buttonDivcountainer').style.visibility='hidden';
            $( '#editProfileInfo' ).dialog( "close" );



    }

	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );

		var fName = $( "#fName" ),
                 lName = $( "#lName" ),
                 dBirth = $( "#dBirth" ),
                 password = $( "#password" ),
                 notif = $("#notif"),
			allFields = $( [] ).add(fName ).add(lName ).add(dBirth ).add(password).add(notif),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}

		$( "#editProfileInfo" ).dialog({//#editProfileInfo is the id of the ui jquery tages
			autoOpen: false,
			height: 355,
			width: 400,
			dialogClass: 'dialog_class',
			modal: true,
			/*buttons: {
				"Save changes": function() {//this is the button which i want it to be hidden at first unless it is triggered by clicking on one of the div of the st code :)
					//some staff
					if ( bValid ) {
						//some staff
                                            }
				},
				Cancel: function() {//this is the button which i want it to be hidden at first unless it is triggered by clicking on one of the div of the st code :)

					$( "#editProfileInfo" ).dialog( "close" );
					document.getElementById('validation_pro').innerHTML="";
				}
			},*/
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
				document.getElementById('validation_pro').innerHTML="";
			}
		});





	});

	$( "#profile" ).click(function() {//#profile is an id of a div on my html when i click on it the dialog is showen
				document.getElementById('validation_sit').innerHTML="";
         emailAdd=username;
        var url='<?php echo base_url()?>userprofile/showInformation/';
        $("#waiting_div").show();
        $.post(url, {email:emailAdd},function(data) {
            //alert(data);
            $("#waiting_div").hide();
         var returnedObje=eval('(' + data + ')');
         var firsName=returnedObje.firstName;
         var lastName=returnedObje.lastName;
         var dateOfBirth=returnedObje.dateOfBirth;
         var isnotif=returnedObje.notif;
         var notif='';
         if(isnotif=='notifiable')
             {
                notif=true;
             }
         else
             {
                notif=false;
             }

         document.getElementById('fName').innerHTML=firsName;
         document.getElementById('lName').innerHTML=lastName;
         document.getElementById('dBirth').innerHTML=dateOfBirth;
         document.getElementById('notif').checked=notif;
         document.getElementById('notif').innerHTML=" ";
                                        });

				$( "#editProfileInfo" ).dialog( "open" );//#editProfileInfo is the id of the ui jquery tages
	});

	</script>


<!--end-->
<!-- addfriend-->
<div id="add-friend-form" title="Add Friend">


	<form style="border-color:black">
	<fieldset style="border-style:hidden; padding-left:30px;color:white">
		<label for="email">Friend email</label>
		<input style="display:block" type="text" name="email" id="email" class="text ui-widget-content ui-corner-all" />
                <p id="validation_f" class="validateTips"></p>
	</fieldset>
	</form>
</div>

<script type="text/javascript">

	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );

		var email = $( "#email" ),

			allFields = $( [] ).add( email ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}

		$( "#add-friend-form" ).dialog({
			autoOpen: false,
			height: 200,
			width: 400,
			dialogClass: 'dialog_class',
			modal: true,
			buttons: {
				"Add Friend": function() {
					document.getElementById('validation_f').innerHTML="";
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "Enter valid E-mail" );

                                        //
					//bValid = bValid && checkLength( color1, "Color", 6, 6 );
					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/

					if ( bValid ) {



                                                var xmlHttp = getXMLHttp();
                                                xmlHttp.onreadystatechange = function()
                                                {
                                                if(xmlHttp.readyState == 4)
                                                        {
                                                          HandleResponse(xmlHttp.responseText);
                                                        }
                                                }
                                                //$param=document.getElementById('Div1');
                                                var url='<?php echo base_url()?>userprofile/addFriend/';
                                                $("#waiting_div").show();
                                                $.post(url, {FriendEmail:email.val(),sitId:selectedSitId},function(data) {
                                                /*alert("Data Loaded: " + data);*/
                                                $("#waiting_div").hide();
                                                //alert(data);
                                                state=data;

                                                if(state==0)
                                                 showcinf('Add Friend','User is Not Register .Invaitation Has Been Send','hideme()',false,'hideme()');
                                                   // document.getElementById('validation_f').innerHTML='user is not register .Invaitation has been send';
                                                else if(state==1)
                                                    {
                                                    showcinf('Add Friend','User is Now a Friend ','hideme()',false,'hideme()');
                                                    }
                                                   // document.getElementById('validation_f').innerHTML='user is now a friend .Invaitation has been send';
                                                else
                                                    {
                                                     showcinf('Add Friend','User is Already a Friend ','hideme()',false,'hideme()');
                                                    //document.getElementById('validation_f').innerHTML='user is already a friend .Invaitation has been send';
                                                    }
                                        });

                                                $( this ).dialog( "close" );

					}
				},
				Cancel: function() {

					$( this ).dialog( "close" );
					document.getElementById('validation_f').innerHTML="";
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
				document.getElementById('validation_f').innerHTML="";
			}
		});


	});
	$( "#add_friend" ).click(function() {
				document.getElementById('validation_f').innerHTML="";

				$( "#add-friend-form" ).dialog( "open" );
	});
	</script>

</body>
</html>